<template>
  <div class="gantt-blocks">
<!--    <div class="gantt-block-top-space" :style="{ height: cellHeight + 'px' }"/>-->
    <div
        v-show="isOpen"
        class="gantt-block-row-wrapper"
        :style="{ height: showDatas.length * cellHeight + 'px' }"
        ref="wrapperElement"
    >
      <template v-for="rowItem in showDatas">
        <slot
            name="BlockRow"
            :row-data="rowItem"
            :showList="computedRangeList(rowItem.gtArray)"
        ></slot>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {PropType, reactive, computed, ref} from 'vue';
import {isUndef} from "@/utils/tools.ts";
import {GTArray, RowItem} from '../../types'

const props = defineProps({
  scrollLeft: {
    type: Number as PropType<number>,
    default: 0
  },
  unVisibleHeight: {
    type: Number as PropType<number>,
    required: true
  },
  cellWidth: {
    type: Number as PropType<number>,
    required: true
  },
  cellHeight: {
    type: Number as PropType<number>,
    required: true
  },
  heightOfBlocksWrapper: {
    type: Number,
    default: () => {
      return 0
    }
  },
  scale: {
    type: Number as PropType<number>,
    required: true
  },
  endTimeOfRenderArea: {
    type: [Number, null] as PropType<number | null>,
    default: null
  },
  startTimeOfRenderArea: {
    type: [Number, null] as PropType<number | null>,
    default: null
  },
  isOpen: {
    type: Boolean,
    default: true
  },
  datas: {
    type: Array<RowItem>,
    default: () => []
  }
})

// const wrapperElement: HTMLElement = ref()

const showDatas = computed(() => props.datas.filter(item => item));

const precondition = computed(() => {
  return props.heightOfBlocksWrapper > 0 &&
      !isUndef(props.startTimeOfRenderArea) &&
      !isUndef(props.endTimeOfRenderArea);
});

const computedRangeList = (totalList: GTArray[]) => {
  return totalList.filter((item: GTArray) => isInRenderingTimeRange(item.start, item.end));
};

const isInRenderingTimeRange = (timeStart: string, timeEnd: string) => {
  if (!precondition.value) {
    return false;
  }

  const {startTimeOfRenderArea, endTimeOfRenderArea} = props;
  if (endTimeOfRenderArea && startTimeOfRenderArea) {
    return new Date(timeStart).valueOf() <= endTimeOfRenderArea && new Date(timeEnd).valueOf() >= startTimeOfRenderArea;
  } else {
    return false
  }
};
</script>
